<template>
    <div>
        <el-card shadow="hover" class="juque_search_form">
            <div>
                <el-form ref="searchFormRef" size="default" :inline="true" :model="formModel.param">
                    <el-form-item label="文件名称" prop="fileName">
                        <el-input v-model="formModel.param.fileName" show-word-limit maxlength="400" placeholder=""
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="操作节点" prop="operateNode">
                        <el-input v-model="formModel.param.operateNode" show-word-limit maxlength="100" placeholder=""
                            clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="default" type="primary" @click="onSearch">
                            <el-icon>
                                <ele-Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button size="default" type="default" @click="onRest">
                            <el-icon>
                                <ele-RefreshLeft />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card shadow="hover">
            <el-table :data="datasource" :border="true" class="juque_table">
                <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="operateType" label="操作类型" show-overflow-tooltip><template #default="scop">
                        <el-tag>{{ dictTypeCompute(scop.row.operateType) }}</el-tag>
                    </template> </el-table-column>
                <el-table-column prop="operateNode" label="操作节点" show-overflow-tooltip></el-table-column>
                <el-table-column prop="operateIp" label="操作IP" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30, 50]" v-model:current-page="formModel.pageInfo.page"
                background v-model:page-size="formModel.pageInfo.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="formModel.pageInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, computed, onMounted, } from 'vue';
import type { FormInstance } from 'element-plus';
import { BaseRequest } from '/@/interfaces/BaseModel';
import { LogInfoSearchParamModel, LogInfoListModel } from '/@/interfaces/JdfsystemModel';
import { handleSearch } from '../log-info-wrap';
import MESSAGE from '/@/enums/message-enum';
import useObjectUtil from '/@/utils/objectUtil';
import { DictInfo } from '/@/enums/dict-info-enum';

interface State {
    datasource: LogInfoListModel[],
    formModel: BaseRequest<LogInfoSearchParamModel>,
    deleteRowId: string | undefined,
}
export default defineComponent({
    name: 'LogInfoList',
    components: {},
    setup(props, context) {
        const searchFormRef = ref<FormInstance>();
        const state = reactive<State>({
            datasource: [],
            formModel: {
                param: {
                    fileName: undefined,
                    operateNode: undefined,
                },
                pageInfo: {
                    page: 1,
                    limit: 10,
                    total: 0
                }
            },
            deleteRowId: undefined,
        });
        const dictTypeCompute = computed(() => {
            return function (value: any) {
                const dictInfo = DictInfo.logOperateType;
                return dictInfo ? dictInfo.find(item => value === item.key)?.label : value;
            }
        });

        const methodMap = reactive({
            onSearch: async function () {
                const response = await handleSearch(state.formModel);
                const { code, data, pageInfo } = response;
                if (code === MESSAGE.OK) {
                    useObjectUtil.copyProperties(pageInfo, state.formModel.pageInfo);
                    state.datasource = [...data];
                }
            },
            onRest: function () {
                searchFormRef.value?.resetFields();

            },
            onHandleSizeChange: function (val: number) {
                state.formModel.pageInfo.limit = val;
                methodMap.onSearch();
            },
            onHandleCurrentChange: function (val: number) {
                state.formModel.pageInfo.page = val;
                methodMap.onSearch();
            },
        });
        // 挂载完成后
        onMounted(async () => {
        });
        return {
            searchFormRef,
            dictTypeCompute,
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/log-info/log-info.scss';
</style>
